<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Hemisphere in a Uniform Electric Field</title>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}
  canvas { border: 1px solid #ccc; background-color: white; }
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="500"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 24px "Times New Roman"';

    // Helper function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const angle = Math.atan2(toy - fromy, tox - fromx);
        ctx.beginPath();
        // Main line
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        // Arrowhead
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing ---
    const centerX = 280;
    const centerY = 240;
    const radiusY = 100; // This corresponds to R
    const radiusX = 40;  // For perspective

    // Draw the hemisphere body
    ctx.beginPath();
    // Draw the circular base (as an ellipse)
    ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    // Draw the curved surface (as a semi-circle)
    ctx.arc(centerX, centerY, radiusY, -Math.PI / 2, Math.PI / 2);
    ctx.stroke();

    // Draw the electric field lines
    const fieldLinesY = [centerY - 60, centerY - 30, centerY + 30, centerY + 60];
    const fieldStartX = 100;
    const fieldEndX = 500;
    
    ctx.lineWidth = 1.5;
    fieldLinesY.forEach(y => {
        drawArrow(ctx, fieldStartX, y, fieldEndX, y);
    });

    // Draw the radius and labels
    ctx.lineWidth = 2;
    
    // Label O (center)
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('O', centerX - 25, centerY + 5);

    // Radius line
    const radiusAngle = Math.PI / 3.5; 
    const radiusEndX = centerX + radiusX * Math.cos(radiusAngle);
    const radiusEndY = centerY + radiusY * Math.sin(radiusAngle);
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(radiusEndX, radiusEndY);
    ctx.stroke();
    
    // Label R
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('R', centerX + 15, centerY + 50);

    // Label E (Electric Field)
    ctx.fillText('E', fieldEndX + 15, centerY - 15);

    // Draw the caption
    ctx.font = '22px "SimSun", "Songti SC"'; // A font that supports Chinese characters
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText('习题 7-14 图', canvas.width / 2, 450);

</script>
</body>
</html>